<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>DOMBuilder Demo Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="Jonathan Buchanan">
  <style type="text/css">
  html { margin: 0; padding: 0; }
  body { padding: 1em 5%; font-family: sans-serif; }
  h1, h2 { color: #69c; font-family: sans-serif; border-bottom: 1px solid #000; }
  h1 { font-size: 160%; margin: 0em 0 1em -3%; }
  h2 { font-size: 140%; margin: 1em 0 1em -2%; }
  .testClass { background-color: #ddd; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="DOMBuilder.js"></script>
  <script type="text/javascript">
  function createTable(headers, objects, properties)
  {
      return TABLE({cellSpacing: 1, border: 1, "class": "data sortable"},
        THEAD(TR(TH.map(headers))),
        TBODY(
          TR.map(objects, function(obj)
          {
            return TD.map(properties, function(prop) {
                var value = obj[prop];
                if (typeof value == "boolean")
                {
                  value = value ? "Yes" : "No";
                }
                if (typeof value == "undefined" || value === null)
                {
                  value = NBSP
                }
                return value;
            })
          })
        )
      );
  }

  jQuery(document).ready(function()
  {
      with (DOMBuilder.elementFunctions)
      {
          document.body.appendChild(
            DIV(
              "Testing",
              P(
                "Adding elements using ",
                CODE("with (DOMBuilder.elementFunctions)")
              )
            )
          );
      }

      DOMBuilder.apply(window);

      var fragment = DOMBuilder.fragment(STRONG("Hello from a DocumentFragment"));

      document.getElementById("w3cExampleTable").appendChild(DOMBuilder.fragment(
        fragment.cloneNode(true),
        TABLE({border: 2, frame: "hsides", rules: "groups",
               summary: "Code page support in different versions of MS Windows.",
               click: function(e)
               {
                   alert(["You clicked this ", this.tagName, " at (",
                          e.screenX, ",", e.screenY, ")"].join(""));
               }},
          CAPTION("CODE-PAGE SUPPORT IN MICROSOFT WINDOWS"),
          COLGROUP({align: "center"}),
          COLGROUP({align: "left"}),
          COLGROUP({align: "center", span: 2}),
          COLGROUP({align: "center", span: 3}),
          THEAD({valign: "top"},
            TR(
              TH("Code-Page", BR(), "ID"),
              TH("Name"),
              TH("ACP"),
              TH("OEMCP"),
              TH("Windows", BR(), "NT 3.1"),
              TH("Windows", BR(), "NT 3.51"),
              TH("Windows", BR(), "95")
            )
          ),
          TBODY(
            TR(TD(1200), TD("Unicode (BMP of ISO/IEC-10646)"), TD(),    TD(), TD("X"), TD("X"),  TD("*")),
            TR(TD(1250), TD("Windows 3.1 Eastern European"),   TD("X"), TD(), TD("X"), TD("X"),  TD("X")),
            TR(TD(1251), TD("Windows 3.1 Cyrillic"),           TD("X"), TD(), TD("X"), TD("X"),  TD("X")),
            TR(TD(1252), TD("Windows 3.1 US (ANSI)"),          TD("X"), TD(), TD("X"), TD("X"),  TD("X")),
            TR(TD(1253), TD("Windows 3.1 Greek"),              TD("X"), TD(), TD("X"), TD("X"),  TD("X")),
            TR(TD(1254), TD("Windows 3.1 Turkish"),            TD("X"), TD(), TD("X"), TD("X"),  TD("X")),
            TR(TD(1255), TD("Hebrew"),                         TD("X"), TD(), TD(),    TD(),     TD("X")),
            TR(TD(1256), TD("Arabic"),                         TD("X"), TD(), TD(),    TD(),     TD("X")),
            TR(TD(1257), TD("Baltic"),                         TD("X"), TD(), TD(),    TD(),     TD("X")),
            TR(TD(1361), TD("Korean (Johab)"),                 TD("X"), TD(), TD(),    TD("**"), TD("X"))
          ),
          TBODY(
            TR(TD(437), TD("MS-DOS United States"),        TD(), TD("X"), TD("X"), TD("X"), TD("X")),
            TR(TD(708), TD("Arabic (ASMO 708)"),           TD(), TD("X"), TD(),    TD(),    TD("X")),
            TR(TD(709), TD("Arabic (ASMO 449+, BCON V4)"), TD(), TD("X"), TD(),    TD(),    TD("X")),
            TR(TD(710), TD("Arabic (Transparent Arabic)"), TD(), TD("X"), TD(),    TD(),    TD("X")),
            TR(TD(720), TD("Arabic (Transparent ASMO)"),   TD(), TD("X"), TD(),    TD(),    TD("X"))
          )
        )
      ));

      // Generate some HTML to demonstrate withMode
      document.getElementById("htmlGeneration").innerHTML = DOMBuilder.withMode("XHTML", function()
      {
          var fragment = DOMBuilder.fragment(STRONG("Hello from an ", CODE("HTMLFragment")), " with sibling nodes");
          return DIV({"class": "article"},
            H3("This section was generated using ", CODE("DOMBuilder.withNode"), " and ", CODE("innerHTML")),
            P("Special characters should be escaped by default: < > \" ' &"),
            P(DOMBuilder.markSafe("But you can <strong>prevent Strings being escaped</strong> using <code>DOMBuilder.markSafe</code>")),
            P("This should have an XHTML-style slash: ", BR().toString(), BR()),
            DOMBuilder.withMode("HTML", function() { return P("This one shouldn't: ", BR().toString(), BR()); }),
            H3(CODE("HTMLFragment"), " section"),
            P("Cloned fragment: ", fragment.cloneNode(true)),
            P("Original fragment has a length of: ", STRONG(fragment.childNodes.length)),
            P("Original fragment: ", fragment),
            P("Original fragment now has a length of: ", STRONG(fragment.childNodes.length)),
            EM(DOMBuilder.markSafe(DOMBuilder.fragment("toString() from an ", CODE("HTMLFragment"), " with sibling nodes").toString()))
          );
      }).toString();

      document.getElementById("demoForm").appendChild(
        FORM({name: "testForm", method: "POST", action: "",
              onsubmit: function()
              {
                  if (this.elements["testInput1"].value ==
                      this.elements["testInput1"].defaultValue)
                  {
                      alert("Submitting with the default value set!");
                  }
              }},
          DIV({"class": "testClass"},
            fragment.cloneNode(true),
            P(
              LABEL({"for": "testInput1"}, "defaultValue: \"defaultValue\""),
              " ",
              INPUT({type: "text", name: "testInput1", id: "testInput1",
                     defaultValue: "defaultValue",
                     focus: function()
                     {
                        if (this.value == this.defaultValue)
                        {
                            this.value = "";
                        }
                     },
                     blur: function()
                     {
                        if (this.value == "")
                        {
                            this.value = this.defaultValue;
                        }
                     }
                }),
                BR(),
                LABEL({"for": "testInput2"}, "value: \"value\""),
                " ",
                INPUT({type: "text", name: "testInput2", id: "testInput2",
                     value: "value",
                     focus: function()
                     {
                        if (this.value == this.defaultValue)
                        {
                            this.value = "";
                        }
                     },
                     blur: function()
                     {
                        if (this.value == "")
                        {
                            this.value = this.defaultValue;
                        }
                     }
                 })
            ),
            P({style: "background-color: #ccc"},
              LABEL(INPUT({type: "checkbox", name: "testCheckbox", checked: true}), "checked: true"),
              BR(),
              LABEL(INPUT({type: "checkbox", name: "testCheckbox", defaultChecked: true}), "defaultChecked: true"),
              BR(),
              LABEL(INPUT({type: "checkbox", name: "testCheckbox"}), "The unloved checkbox")
            ),
            P(
              UL(
                LI(LABEL(INPUT({type: "radio", name: "testRadio"}), " Check this out")),
                LI(LABEL(INPUT({type: "radio", name: "testRadio", checked: true}), " Or check this out"))
              )
            ),
            P(
              LABEL({"for": "testMultipleSelect"}, "Test Multiple Select:"),
              " ",
              SELECT({name: "testMultipleSelect", id: "testMultipleSelect", multiple: true, size: 3},
                OPTION({value: ""}, "----------"),
                OPTION({value: "1", defaultSelected: true}, "defaultSelected: true"),
                OPTION({value: "2", selected: true}, "selected: true"),
                OPTION({value: "3"}, "3")
              )
            ),
            P(
              LABEL({"for": "testSelectOne"}, "Test Single Select:"),
              " ",
              SELECT({name: "testSelectOne", id: "testSelectOne", multiple: false, size: 3},
                OPTION({value: ""}, "----------"),
                OPTION({value: "1", defaultSelected: true}, "1"),
                OPTION({value: "2", selected: true}, "2"),
                OPTION({value: "3"}, "3")
              )
            ),
            INPUT({"type": "submit", value: "Submit"}),
            INPUT({"type": "reset", value: "Reset"})
          )
        )
      );

      document.getElementById("generatedTable").appendChild(createTable(
          ["Type", "Properties", "References", "AutoIncrement", "Updateable"],
          [
            {type: "Test Type 1", propertyList: "Prop1, Prop2, Prop3", references: null, isAutoIncrement: true, isUpdateable: false},
            {type: "Test Type 2", propertyList: "Prop4, Prop5, Prop6", references: "Flargle", isAutoIncrement: true, isUpdateable: true}
          ],
          ["type", "propertyList", "references", "isAutoIncrement", "isUpdateable"]
      ));
  });
  </script>
</head>
<body>

<h1>DOMBuilder Demo Page</h1>

<h2>W3C Example Table</h2>
<div id="w3cExampleTable"></div>

<h2>HTML Generation</h2>
<div id="htmlGeneration"></div>

<h2>Demo Form</h2>
<div id="demoForm"></div>

<h2>Generated Table</h2>
<div id="generatedTable"></div>

<h2>Added using <code>with (DOMBuilder.elementFunctions)</code></h2>

</body>
</html>